<template>
  <view
    class="w-[100%] min-h-screen bg-gradient-to-b from-green-400 to-green-700 flex flex-col items-center justify-center"
  >
    <!-- 登录表单区域 -->
    <view class="w-[80%] flex flex-col items-center justify-center mt-10">
      <!-- 账号输入框 -->
      <view class="flex items-center py-3 px-4 w-[100%] mb-6">
        <wd-icon name="user" size="45rpx" />
        <input
          type="text"
          placeholder="请输入账号"
          class="w-[100%] bg-transparent outline-none text-white text-sm ml-2 border-b-solid border-b-2 border-gray-300"
          v-model="name"
        />
      </view>

      <!-- 密码输入框 -->
      <view class="flex items-center py-3 px-4 w-full mb-6">
        <wd-icon name="lock-off" size="45rpx" />
        <input
          type="password"
          placeholder="请输入密码"
          class="w-[100%] bg-transparent outline-none text-white text-sm ml-2 border-b-solid border-b-2 border-white"
          v-model="password"
        />
      </view>

      <view class="flex items-center py-3 px-4 w-full mb-10">
        <wd-icon name="lock-off" size="45rpx" />
        <wd-picker :columns="columns" v-model="rule" @confirm="handleConfirm" />
      </view>

      <!-- 视角选择按钮 -->
      <view class="w-full flex gap-4">
        <button
          @click="backTo(1)"
          class="h-[80%] w-[40%] bg-green-500/0 rounded-12px text-white border-solid border-2 border-white transition-all duration-300 hover:bg-green-50 active:bg-green-100 active:scale-95"
        >
          返回
        </button>
        <button
          @click="handleLogin"
          class="h-[80%] w-[40%] bg-green-500 text-white rounded-12px transition-all duration-300 hover:bg-green-600 active:bg-green-700 active:scale-95 shadow-md"
        >
          登录
        </button>
      </view>
    </view>

    <!-- 底部文字 -->
    <view class="absolute bottom-8 text-center text-gray-500 text-sm">
      小程序由四元玉鉴提供技术支持
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { backTo } from '@/utils/unifunc'
import { userLogin } from '@/api/user'
import { masterLogin } from '@/api/master'
import { adminLogin } from '@/api/admin'

// 定义响应式变量
const name = ref('')
const password = ref('')

const columns = ref(['管理员', '用户', '维修师傅'])
const rule = ref('管理员')

function handleConfirm({ value }: { value: string }) {
  rule.value = value
}

const loginUser = async () => {
  const res = await userLogin<any, IUser>({
    name: name.value,
    password: password.value,
    role: rule.value
  })
  if (res.code === 200) {
    uni.setStorageSync('user', res.data)
    uni.setStorageSync('rule', 'user')
    backTo()
  } else {
    uni.showToast({ title: res.message || '登录失败' })
  }
}

const loginMaster = async () => {
  const res = await masterLogin<any, IUser>({
    phone: name.value,
    password: password.value,
    role: rule.value
  })
  if (res.code === 200) {
    uni.setStorageSync('user', res.data)
    uni.setStorageSync('rule', 'master')
    backTo()
  } else {
    uni.showToast({ title: res.message || '登录失败' })
  }
}

const loginAdmin = async () => {
  const res = await adminLogin<any, IUser>({
    phone: name.value,
    password: password.value,
    role: rule.value
  })
  if (res.code === 200) {
    uni.setStorageSync('user', res.data)
    uni.setStorageSync('rule', 'admin')
    backTo()
  } else {
    uni.showToast({ title: res.message || '登录失败' })
  }
}

// 可以在这里添加登录逻辑
const handleLogin = async () => {
  if (!name.value || !password.value) {
    uni.showToast({ title: '请输入账号和密码' })
    return
  }
  if (rule.value === '用户') await loginUser()
  else if (rule.value === '维修师傅') await loginMaster()
  else await loginAdmin()
}
</script>

<style lang="scss" scoped>
/* 如需自定义样式可在此添加，主要样式已通过UnoCSS实现 */
:v-deep(.uni-input-placeholder) {
  color: #f0f0f0;
}

:deep(.wd-picker) {
  width: 100% !important;
}

:deep(.wd-picker__cell) {
  background-color: rgba(0, 0, 0, 0) !important;
  border-bottom: 1rpx solid #f0f0f0 !important;
}

:deep(.wd-picker__value) {
  color: #fff !important;
}

:deep(.wd-picker__arrow) {
  color: #fff !important;
}
</style>
